<template>
  <div :style="{ '--mySize': fontSizeVal }">
    <el-button @click="mathFont">fontSize</el-button>
    <el-button @click="onclick">123</el-button>
    <p class="box">xxxxxxxxxxxxxxx</p>
    <el-drawer
      v-model="show"
      size="1200"
      :modal="false"
      title="I am the title"
      :append-to-body="true"
      :modal-append-to-body="fasle"
    >
      <span class="box">Hi, there!</span>
    </el-drawer>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
const show = ref(false);
const onclick = () => {
  show.value = !show.value;
};
const fontSize = ref(34);
const mathFont = () => {
  fontSize.value = fontSize.value + 2;
};
const fontSizeVal = computed(() => {
  return fontSize.value + "px";
});
</script>
<style scoped>
.box {
  font-size: var(--mySize);
}
</style>
